<template>
  <el-dialog
    title="历史版本"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose">
    <el-form ref="form" :model="dataForm" label-width="80px" style="height: 500px;overflow-y: auto;">
      <div v-if="historyList.length > 0">
        <div v-for="(item, index) in historyList" :key="index">
          <div class="time">
            {{ item.batchTime | formatDate }}
          </div>
          <div class="center-card" >
            <div class="card-left">
              <span class="form-sub-title">涉敏区域</span>
              <div class="card-left-body">
                <el-col :span="24">
                  <el-form-item label="BIM模型:" label-width="120px">
                    {{ item.sensitiveAreaBim }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="GIS边界文件:" label-width="120px">
                    <div style="height: 100px; overflow: auto;overflow-x: hidden;">
                      <div class="file-item" v-for="file in item.gisFiles" :key="file.fileId">
                        <img src="../../../../assets/icon/antFill-file-excel.png" class="file-item-icon" alt="">
                        <div class="file-item-content">
                          <div class="file-item-text" :title="file.fileName">{{ file.fileName }}</div>
                          <div class="file-item-button"><el-button type="text" @click="download(file)"><i class="el-icon-download"></i>下载</el-button>
                            <el-button type="text" @click="filePreview(file)">预览</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </div>
            </div>
            <div class="card-line"></div>
            <div class="card-center">
              <span class="form-sub-title">施工设计</span>
              <div class="card-center-body">
                <el-col :span="24">
                  <el-form-item label="BIM模型:" label-width="120px">
                    {{ item.constructDesignBim }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="施工方案文件:" label-width="120px">
                    <div style="height: 100px; overflow: auto;overflow-x: hidden;">
                      <div class="file-item" v-for="file in item.schemeFiles" :key="file.fileId">
                        <img src="../../../../assets/icon/antFill-file-excel.png" class="file-item-icon" alt="">
                        <div class="file-item-content">
                          <div class="file-item-text" :title="file.fileName">{{ file.fileName }}</div>
                          <div class="file-item-button"><el-button type="text" @click="download(file)"><i class="el-icon-download"></i>下载</el-button>
                            <el-button type="text" @click="filePreview(file)">预览</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty">暂无数据</div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { download, getSchemeHistory } from '@/api/constructionScheme'
import { formatDate } from '@/utils/filters'

export default {
  name: 'HistoryVersion',
  data () {
    return {
      dialogVisible: false,
      dataForm: {},
      historyList: []
    }
  },
  methods: {
    formatDate,
    filePreview (item) {
      this.$filePreview(item)
    },
    init (schemeId) {
      getSchemeHistory({ schemeId: schemeId }).then(res => {
        if (res.code === 'success') {
          this.historyList = res.data
        }
        this.dialogVisible = true
      })
    },
    // 下载文件
    download (row) {
      download(row.fileId).then(res => {
        console.log(res)
        const blob = new Blob([res.res])
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 创建a标签
        link.href = url
        link.download = row.fileName // 重命名文件
        link.click()
        URL.revokeObjectURL(url) // 释放内
      })
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang='scss'>
.form-sub-title {
  margin-bottom: 10px;
  color: #000;
  font-size: 15px;
  font-weight: bold;
}

.center-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.card-left {
  width: calc(49% - 21px);

  .card-left-body {
    padding: 10px 30px;
    height: 200px;
  }
}

.card-center {
  width: calc(49% - 21px);

  .card-center-body {
    padding: 10px 30px;
    height: 200px;
  }
}

.card-line {
  margin: 0 20px;
  height: 180px;
  width: 1px;
  background: #ddd;
}

.file-item {
  display: flex;
  margin-bottom: 10px;
}

.file-item-icon {
  width: 40px;
  height: 50px;
}

.file-item-content {
  margin-left: 10px;
  height: 50px;
   width: calc(100% - 45px);
  .file-item-text {
    height: 25px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .file-item-button {
    height: 25px;
  }
}
.time {
  color: #101010;
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
}
.empty{
  height: 500px;
  line-height: 500px;
  color: #ccc;
  text-align: center;
}
</style>
